import React from 'react';
import { Button, Modal, Form, Input, Radio, Select, Upload } from 'antd';

const AddDialog = Form.create({ name: 'form_in_modal' })(
  class extends React.Component {
    state = {
      type: '0',
      fileList: [],
    }

    componentDidMount() {
      if (this.props.onRef) {
        this.props.onRef(this);
      }
    };

    changeType = (value) => {
      this.setState({ type: value })
    }

    onCancel = () => {
      this.setState({ type: '0', fileList: [] }, () => {
        if (this.props.onCancel) {
          this.props.onCancel()
        }
      })
    }

    handleUpFile = info => {
      let fileList = [...info.fileList];
      fileList = fileList.slice(-1);
      fileList = fileList.map(file => {
        if (file.response) {
          file.url = file.response.url;
        }
        return file;
      });
      this.setState({ fileList });
    };

    render() {
      const { visible, onCancel, onCreate, form, dialogCategoryId, tabPaneList } = this.props;
      const { type, fileList } = this.state;
      const { getFieldDecorator } = form;
      const formItemLayout = {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      };
      const uploadProps = {
        onRemove: file => {
          this.setState(state => {
            const index = state.fileList.indexOf(file);
            const newFileList = state.fileList.slice();
            newFileList.splice(index, 1);
            return {
              fileList: newFileList,
            };
          });
        },
        beforeUpload: file => {
          this.setState(state => ({
            fileList: [...state.fileList, file],
          }));
          return false;
        },
      };
      return (
        <Modal visible={visible} title="新增多轮对话" okText="确认" cancelText="取消" onCancel={this.onCancel} onOk={onCreate} destroyOnClose>
          <Form {...formItemLayout}>
            <Form.Item label="多轮对话名称">
              {getFieldDecorator('name', {
                rules: [{ required: true, message: '多轮对话名称必填' }],
              })(<Input />)}
            </Form.Item>
            <Form.Item label="多轮对话分类">
              {getFieldDecorator('dialogCategoryId', { rules: [{ required: true, message: '多轮对话分类必填' }], initialValue: dialogCategoryId, })(
                <Select>
                  {tabPaneList.map(item => {
                    return <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>;
                  })}
                </Select>
              )}
            </Form.Item>
            <Form.Item label="创建类型">
              {getFieldDecorator('type', { initialValue: type, rules: [{ required: true }], })(
                <Select onChange={this.changeType}>
                  <Select.Option value={'0'}>直接创建</Select.Option>
                  <Select.Option value={'1'}>导入文件</Select.Option>
                </Select>
              )}
            </Form.Item>
            {type === '1' ? (
              <Form.Item label="上传文件">
                {getFieldDecorator('file', {
                  initialValue: fileList,
                  valuePropName: 'fileList',
                  getValueFromEvent: e => {
                    if (Array.isArray(e)) {
                      return e;
                    };
                    if (e.fileList.length > 0) {
                      e.fileList = [e.file];
                    };
                    return e && e.fileList;
                  }
                })(
                  <Upload {...uploadProps}>
                    <Button block>点击上传</Button>
                  </Upload>
                )}
              </Form.Item>
            ) : null}
            {/*{*/}
            {/*  type === '0' ?*/}
            {/*    <Form.Item label="多轮对话名称">*/}
            {/*      {getFieldDecorator('name', {*/}
            {/*        rules: [{ required: true, message: '多轮对话名称必填' }],*/}
            {/*      })(<Input />)}*/}
            {/*    </Form.Item>*/}
            {/*    :*/}
            {/*    <Form.Item label="多轮对话">*/}
            {/*      {getFieldDecorator('name', {*/}
            {/*        rules: [{ required: true, message: '多轮对话名称必填' }],*/}
            {/*      })(<Input />)}*/}
            {/*    </Form.Item>*/}
            {/*}*/}
          </Form>
        </Modal>
      );
    }
  },
);

export default AddDialog;
